/**
 * 步骤：
 * 1. 排出基本的页面结构（拼积木）
 * 2. 替换数据
 * 3. （可选）解决bug
 */
 import React, { Component } from 'react'
 import { Space, Table, Tag, Pagination } from 'antd'
 import url from '../../../../config/url'
 import req from '../../../../http/req'
import Tianjia from './tianjia'
import Xiugai from '../zujian/xiugai'
import Dele from './dele'
// import Daochu from '../zujian/daochu'
 /**
  * title：设置表格标题
  * dataIndex：关联数据的属性名
  * key：提高效率，要求唯一
  * render：（可选）对原有数据进行修饰，返回的数据为最终渲染的数据
  */
  const columns = [
    {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        align: 'center',
    },
    {
        title: '大鹏名称',
        dataIndex: 'username',
        key: 'username',
        align: 'center',
    },
    {
        title: '手机号',
        dataIndex: 'mobile',
        key: 'mobile',
        align: 'center',
        render: (mobile) => mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'),
    },
    {
        title: '邮箱',
        dataIndex: 'email',
        key: 'email',
        align: 'center',
    },
    {
        title: '土壤水分',
        key: 'gender',
        dataIndex: 'gender',
        align: 'center',
        render: (gender) => {
            if (gender === '1') {
                return <Tag color="blue">30%</Tag>
            }
            if (gender === '2') {
                return <Tag color="pink">40%</Tag>
            }
            if (gender === '3') {
                return <Tag color="green">20%</Tag>
            }
        },
    },
    {
        title: '当前状态',
        key: 'status',
        dataIndex: 'status',
        align: 'center',
        render: (status) => {
            if (status === '1') {
                return <Tag color="green">正常</Tag>
            }
            if (status === '2') {
                return <Tag color="red">异常</Tag>
            }
        },
    },
    {
        title: '操作',
        key: 'action',
        align: 'center',
        render: (_, record) => (
            <Space size="middle">
                <Xiugai fn={()=> {return record}}></Xiugai>
                <Dele record={record}></Dele>
            </Space>
        ),
    },
]
 
 class Leibiao extends Component {
     state = {
         data: [],
         page: 1, // 默认从第一页加载数据
         limit: 10, // 默认每页显示十个数据
         total: 0, // 默认总数
     }
 
     render() {
         return (
             <div>
                 {/* 页头 */}
                 <div className='wenzi'>
                    <div>
                    <span className='guanjian'>关键数据指标</span>
                    </div>
                    <div className='sunnmi'>
                    <select className='xuanze' v-model="selectp">
                        <option value="">请选择</option>
                        <option value="shaghai">正常</option>
                        <option value="beijign">异常</option>
                        <option value="heilongjiang">处理中</option>
                    </select> 
                    {/* 添加 */}
                    <Tianjia></Tianjia>
                    <button className='daochu'>导出</button>
                 
                    </div>
                 </div>
 
                 {/* 表格 */}
                 <Table
                     columns={columns}
                     pagination={false}
                     dataSource={this.state.data}

                     rowKey="id"
                 />
                 {/* 分页 */}
                 <Pagination
                         onChange={this.loadData}
                         current={this.state.page}
                         total={this.state.total}
                     />
             </div>
         )
     }
     componentDidMount() {
        const { page, limit } = this.state
        this.loadData(page, limit)
    }

    // 加载数据的方法
    loadData = (page, limit) => {
        req.get(url.GetUsersData, {
            params: {
                page,
                limit,
            },
        }).then((res) => {
            
            this.setState({
                data: res.data.paginate.data,
                total: res.data.paginate.total,
                page: page,
                limit: limit,
            })
        })
    }
 
 }
 
 export default Leibiao